<template>
  <div>
    <mytop :title="title" />
    <div class="warp">
       <div v-if="!address.length" class="notaddress">
         <img src="/1.jpg" alt="">
       </div>
      <van-address-list
        v-model="chossId"
        :list="address"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="choseAddress"
      />
    </div>
  </div>
</template>

<script>
import mytop from 'components/My-Top'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      title: '收货地址',
      chossId: -1
    }
  },
  created () {
    this.chosenAddressId()
  },
  // beforeRouteEnter (to, from, next) {
  //   console.log(from)//可以放入vuex改掉 可以实现自动回去
  //   next()
  // },
  methods: {
    choseAddress (contact, index) {
      console.log(index)
      this.set_order_address(contact)
      this.$router.go(-1)
    },
    onAdd () {
      this.$router.push('/addressAdd')
    },
    onEdit (contact, index) {
      this.$router.push({
        path: '/addressEdit',
        query: {
          index
        }
      })
      console.log(this)
    },
    chosenAddressId () {
      const defaultd = this.address.find(item => item.isDefault)
      if (!this.address.length) {
        this.chossId = -1
      }
      if (defaultd) {
        this.chossId = defaultd.id
      } else {
        this.chossId = this.address[0].id
      }
    },
    ...mapMutations('order', ['set_order_address'])
  },
  computed: {
    ...mapState({
      address: (state) => state.address.address
    })
  },
  mounted () {
    console.log(this.address)
  },
  components: {
    mytop
  }
}
</script>

<style lang="scss" scoped>
.warp {
  margin-top: 46px;
  margin-bottom: 50px;
}
.notaddress{
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
 img{
   width: 100%
 }
}
</style>
